<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!-- #54301A, #9FD5B5 -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href=""> -->

    <title>서클에 오신 것을 환영합니다</title>

    <!-- Bootstrap core CSS -->
    <link href="/resources/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/resources/js/html5shiv.js"></script>
      <script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    
    <script src="/resources/js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
	    var check = '${userDto.num}';
		if(check != ""){
			location.href='/view';
		}
		
		function login(){
			var data = $("#f").serialize();
			
			if(f.InputEmail.value == ""){
				alert('이메일 또는 휴대폰 번호를 입력해 주세요');
				return false;
			}
			if(f.InputPassword.value == ""){
				alert('비밀번호를 입력해 주세요');
				return false;
			}
			
			$.ajax({
 			    type : "POST"
 			    , url : "/login"
 			    , data : data
 			    , dataType : "html"
 			    , timeout : 5000
 			    , error : function(request, status, error) {
 			    	alert("서버문제로 로그인을 할 수 없습니다");
 			    }
 			    , success : function(response) {
 			    	if(response == "true"){
 			    		location.href="/view";
 			    	}else{
 			    		alert('사용자 정보가 올바르지 않습니다');
 			    	}
 			    }
 			    , beforeSend: function() {
 			    	$("#loginBtn").html("&nbsp;").addClass("loginBtnAjax");
 			    	$("#loginBtn").attr("disabled","disabled");
 			    }
 			    , complete: function() {
 			    	$("#loginBtn").html("로그인").removeClass("loginBtnAjax");
 			    	$("#loginBtn").removeAttr("disabled");
 			    }
 			});
			
		}
		/* $().ready(function(){
			$(window).resize(function () {
				if ($(window).innerWidth() <= 767) {
	                $(".mainTopPadding").css('margin-top', 15);
	            }else if ($(window).innerWidth() <= 1200){
	            	$(".mainTopPadding").css('margin-top', 30);
	            }else{
	            	$(".mainTopPadding").css('margin-top', 120);
	            }
	        });
		}); */
		
		/* 페이스북 SDK 초기화 */ 
		window.fbAsyncInit = function() {
			FB.init({appId: '1470611313169572', status: true, cookie: true,xfbml: true});	
			
            FB.Event.subscribe('auth.login', function(response) {
            	location.href= "/fb_login";
            });
            FB.Event.subscribe('auth.authResponseChange', function(response) {
                if (response.status === 'connected') {
                	window.location ="/fb_login";
                }else if (response.status === 'not_authorized') {
                	
                }else{
                	
                }
            });   
        };
			
		(function(d){
		     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
		     if (d.getElementById(id)) return;
		     js = d.createElement('script'); js.id = id; js.async = true;
		     js.src = "//connect.facebook.net/ko_KR/all.js";
		     ref.parentNode.insertBefore(js, ref);
		 }(document));
    </script>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:700italic,400' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css">
    <style type="text/css">
    	
    	/* 크롬 경계선 없애기 */
    	a:focus{
    		outline:none;
		}
	   	:focus{
			outline-color: transparent;
			outline-style: none;
		}
		.btn:focus {
			outline: none;
		}
    	
		body { padding-top: 50px; }
		
    	@media screen and (max-width: 767px){ .mainTopPadding{margin-top:15px;}}
    	@media screen and (min-width: 768px){ .mainTopPadding{margin-top:100px;}}
    	@media screen and (min-width: 1200px){ .mainTopPadding{margin-top:120px;}}
    	
    	#mainWarp{
    		width:100%;
    		min-height:460px;
    		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
			background: url();
			background: -moz-linear-gradient(top,  rgba(209,209,209,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209,209,209,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  rgba(209,209,209,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  rgba(209,209,209,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  rgba(209,209,209,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
			background: linear-gradient(to bottom,  rgba(209,209,209,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6d1d1d1', endColorstr='#00000000',GradientType=0 ); /* IE6-8 */
    	}
    	
    	.commonFont{
    		font-family: 'Nanum Gothic Coding', monospace;
    	}
    	
    	/* 기기 해상도에 따라 위쪽 여택 주기 */
    	.mainTopPadding{
    	}
    	
    	@media screen and (min-width: 1000px){
    		.animate-hide{
    			display: none;
    		}
		}
		.move-up{
			margin-top:20%;
			opacity:0;
		}
		.alert{
			width: 100%;
    		position: fixed;
    		z-index: 1050;
    		top:0;
    		display: none;
    	}
    	.loginBtnAjax{
    		background: url('/resources/img/ajax-loader3.gif');
			background-position:center;
			background-repeat:no-repeat;
    	}
    	.circle {
    		width: 60px;
    		height: 60px;
    		border-radius: 50%;
    		background-color: #9FD5B5;
    		cursor: pointer;
    		color: #fff;
    		margin: 0 auto;
    	}
    	.circle i {
    		margin-top: 17px;
    		font-size: 28px;
    	}
    	.logo{
			font-size: 24px;
			line-height: 20px;
			font-family: 'Open Sans', 'sans-serif';
			font-style: italic;
			font-weight: 700;
			color: #6fab87!important;
		}
    </style>
    <!--[if gte IE 9]>
	  <style type="text/css">
	    .gradient {
	       filter: none;
	    }
	  </style>
	<![endif]-->
	
  </head>

  <body>
	<div class="fb-root"></div>
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" style="box-shadow: 1px 0px 3px rgba(0,0,0,0.4);">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand logo" href="/" title="홈">Circles</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="언어선택">언어 : <span id="selectLang">한국어</span><b class="caret"></b></a>
              <ul class="dropdown-menu" style="min-width: 125px;">
                <li class="active"><a href="#">한국어</a></li>
                <li><a href="javascript:alert('English service is coming soon')" >English</a></li>
                <li><a href="javascript:alert('中国服务准备')">简体中文</a></li>
                <li><a href="javascript:alert('日本のサービスは準備中です')">日本語</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    <!-- Fixed navbar -->
    
    <div id="mainWarp">
    	<div class="container">
    		<div class="row">
    			<!-- 타이틀 영역 -->
		    	<div class="col-md-7 mainTopPadding move-up" id="step4">
		    		<h1><span class="commonFont">그룹을 만들어 보세요</span><br>
					<small><span class="commonFont">간단하게 그룹을 생성하고, 멤버들을 초대해 우리만의 공간을 만들어 보세요. 평생 무료로 제공되며 회원가입이 필요합니다.</span></small>
					</h1>
					<p><a class="btn btn-success btn-lg" href="signup" title="가입하기" tabindex="4">&nbsp;&nbsp;가입하기&nbsp;&nbsp;</a></p>
		    	</div>
				<!-- 타이틀 영역 -->
				<!-- 로그인 영역 -->
		    	<div class="col-md-4 col-md-offset-1 mainTopPadding animate-hide" id="step5">
		    			<form role="form" method="post" id="f">
		    				<div class="form-group">
		    					<label for="InputEmail">이메일 또는 휴대폰</label>
		    					<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false" data-scope="user_birthday,email,user_likes,user_hometown"></div>
								<input type="text" class="form-control" id="InputEmail" name="InputEmail" placeholder="이메일 또는 휴대폰" title="이메일 또는 휴대폰" tabindex="1" autofocus="autofocus">
							</div>	
							<div class="form-group">
								<label for="InputPassword">비밀번호</label>
								<input type="password" class="form-control" id="InputPassword" name="InputPassword" placeholder="비밀번호" title="비밀번호" tabindex="2" onkeypress="if (event.keyCode == 13) { login(f); }">
							</div>
							<button type="button" onclick="javascript:login();" class="btn btn-purple btn-lg btn-block" title="로그인" tabindex="3" id="loginBtn">로그인</button>
		    			</form>
		    	</div>
		    	<!-- 로그인 영역 -->
		    	<div class="col-md-12">
		    		<div class="page-header animate-hide" style="margin-top:15px; padding-top:0;" id="step6"></div>
		    	</div>
	    	</div><!-- end row -->
    	</div><!-- end container -->
    </div><!-- end mainWarp -->

	<!-- sub warp -->
	<div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4 animate-hide" id="step1">
        	<div style="text-align:center;">
	          <div class="circle"><i class="fa fa-group"></i></div><h2 style="color:#54301A;"><span class="commonFont"> 그룹 서비스</span></h2>
	          <p class="commonFont" style="color:#999999;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
	          <p><a class="btn btn-default commonFont" href="#">자세히 알아보기 &raquo;</a></p>
          	</div>
        </div>
        <div class="col-md-4 animate-hide" id="step2">
        	<div style="text-align:center;">
	          <div class="circle"><i class="fa fa-desktop"></i></div><h2 style="color:#54301A;" ><span class="commonFont"> 모두에게 맞춤</span></h2>
	          <p class="commonFont" style="color:#999999;">서클은 최신 데스크탑 브라우저뿐만 아니라 스마트폰, 태블릿 등 모든 기기에 최적화 되어있습니다. 앱 설치없이 인터넷만 연결되어 있으면 맞춤화된 환경에서 모든 서비스를 이용하실 수 있습니다.</p>
	          <p><a class="btn btn-default commonFont" href="#">자세히 알아보기 &raquo;</a></p>
	        </div>
       </div>
        <div class="col-md-4 animate-hide" id="step3">
        	<div style="text-align:center;">
	          <div class="circle"><i class="fa fa-bars"></i></div><h2 style="color:#54301A;"><span class="commonFont"> 다양한 기능</span></h2>
	          <p class="commonFont" style="color:#999999;">스케줄관리, 가계부관리, 설문조사, 포토앨범, 게시판 등 서클만의 다양한 기능들이 준비되어있습니다.</p>
	          <p><a class="btn btn-default commonFont" href="#">자세히 알아보기 &raquo;</a></p>
	        </div>
        </div>
      </div>
	</div> <!-- /container -->
	<div class="container">
	<hr>
      <footer>
      	<div class="row">
      		<div class="col-md-2"><p>&copy; Circles 2013</p></div>
			<div class="col-md-6 col-md-offset-4">
				<ul class="list-inline text-right commonFont">
					<li><a href="/company">회사소개</a></li>
					<li><a href="/company">고객지원</a></li>
					<li><a href="/company">이용약관</a></li>
					<li><a href="/company">광고</a></li>
					<li><a href="/company">인재채용</a></li>
				</ul>
			</div>
        </div>
      </footer>
    </div> <!-- /container -->

    <script src="/resources/js/bootstrap.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){
    		$("#step1").fadeIn(500);
    		setTimeout(function(){
    			$("#step2").fadeIn(500);
    		}, 500);
    		setTimeout(function(){
    			$("#step3").fadeIn(500);
    		}, 1000);
    		setTimeout(function(){
    			$("#step4").removeClass("move-up", 1000);
    		}, 1300);
    		setTimeout(function(){
    			$("#step5").fadeIn(700);
    			$("#step6").fadeIn(700);
    		}, 2000);
    		
    		if ( jQuery.browser.msie ) {
    	  		if(jQuery.browser.version < 10){
    	  			$("#failAlert").slideDown().delay(6000).fadeOut(400);;
    	  		}
    		}
    		// 경고창 닫기버튼
    		$("button.close").click(function(){
    			$(this).parent().hide();
    		});
    	});
    </script>
    <!-- 익스플로러10버전 이하 경고문 -->
    <div class="alert alert-danger" id="failAlert">
		<button type="button" class="close">×</button>
		<a href="#" class="alert-link commonFont"><i class="glyphicon glyphicon-exclamation-sign"></i>&nbsp;서클은 최신브라우저에서 작동합니다. 브라우저를 업데이트하거나, 다른 최신웹브라우저를 사용해 주세요</a>
	</div>
  </body>
</html>